<template>
  <view class="sku-item" :class="{ selected }">
    <!-- 商品图片 -->
    <image-container :src="skuItem.thumbImg" alt="商品图片" max-width="100%"></image-container>
    <!-- 数量与重量 -->
    <view class="spec-meta">
      <text class="weight">{{ skuItem.netContent }}ML * {{ specBuct.value }}</text>
    </view>

    <!-- 金额展示 -->
    <view class="price-box">
      <text class="price">
        {{ (skuItem.salePrice / specBuct.value).toFixed(2) + '/' + specBuct.key }}
      </text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { GoodsSku } from '@/service/goods/goods'
import type { PropType } from 'vue'
import { computed } from 'vue'

const props = defineProps({
  skuItem: {
    type: Object as PropType<GoodsSku>,
    required: true,
    default: () => ({}),
  },
  selected: {
    type: Boolean,
    default: false,
  },
})
const specValue = JSON.parse(props.skuItem.skuSpec)[0]
const specBuct = computed(() => {
  const obj = Object.keys(specValue)
  const key = obj[0]
  const value = specValue[key]

  return { key, value }
})
</script>

<style lang="scss" scoped>
.sku-item {
  $border-width: 2rpx;
  position: relative;
  width: 160rpx;
  margin: 6rpx 10rpx;
  // overflow: visible; // 允许阴影溢出
  background: #fff;
  border: 2rpx solid #999;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  .price-box {
    padding-bottom: 10rpx;
    text-align: center;
    background: rgba($color: #666, $alpha: 0.1);
    border-radius: 0 0 10rpx 16rpx;
    .price {
      font-size: 20rpx;
      color: #333;
      &::before {
        font-size: 0.8em;
        content: '¥';
      }
    }
  }
  &::after {
    position: absolute;
    inset: -$border-width;
    content: '';
    border: $border-width solid #eee;
    border-radius: inherit;
    transition: inherit;
  }

  &.selected {
    // transform: translateY(-8rpx);

    &::after {
      border-color: $uni-bg-themes;
      border-width: 4rpx;
      box-shadow: 0 8rpx 32rpx var(--theme-color-10);
    }

    .price-box {
      background: rgba($color: $uni-bg-themes, $alpha: 0.1);
      .price {
        font-weight: 600;
        color: #e93b3b;
      }
    }
  }

  .spec-meta {
    font-size: 20rpx;
    line-height: 1.4;
    color: #666;
    text-align: center;

    .weight {
      display: block;
      margin-top: 4rpx;
      font-size: 20rpx;
      color: #999;
    }
  }

  &:hover {
    .thumbnail-image {
      transform: scale(1.03);
    }
  }
}
</style>
